<template>
	<view class="form-box bg-white " :style="[AppSkinVar]" >
		<e-form labelPosition="left" :borderBottom="false" errorType="toast"  labelWidth="auto" :model="form"
			:rules="rules" ref="formRef">
			<view class="form-item">
				<e-form-item :label="$t('user.持卡人')" prop="realname">
					<e-input v-model="form.realname" inputAlign="right" :placeholder="$t('user.请输入持卡人姓名')"
						border="none"></e-input>
				</e-form-item>
			</view>
			<view class="form-item">
				<e-form-item :label="$t('user.身份证')" prop="idcard">
					<e-input v-model="form.idcard" inputAlign="right" :placeholder="$t('user.请输入身份证号码')"
						border="none"></e-input>
				</e-form-item>
			</view>
			<view class="form-item">
				<e-form-item :label="$t('user.开户行')" prop="typeid">
					<picker-select v-model="form.typeid" inputAlign="right" labelKey="bankname" valueKey="id" :columns="bankList" :placeholder="$t('user.请选择开户行')"></picker-select>
				</e-form-item>
			</view>
			<view class="form-item">
				<e-form-item label="开户支行" prop="bankaddr">
					<e-input v-model="form.bankaddr" inputAlign="right" placeholder="请输入开户支行"
						border="none"></e-input>
				</e-form-item>
			</view>
			<view class="form-item">
				<e-form-item :label="$t('user.卡号')" prop="bankcode">
					<e-input v-model="form.bankcode" inputAlign="right" type="number" :placeholder="$t('user.请输入银行卡卡号')"
						border="none"></e-input>
				</e-form-item>
			</view>
			<view class="form-item">
				<e-form-item label="银行卡类型" prop="cardType">
					<picker-select v-model="form.cardType" inputAlign="right" labelKey="name" valueKey="value" :columns="[[{
						name:'借记卡',value:'DE'
					},
					{
						name:'贷记卡',value:'CR'
					}]]" placeholder="请选择银行卡类型"></picker-select>
				</e-form-item>
			</view>
			<view class="form-item">
				<e-form-item :label="$t('user.手机号')" prop="phone">
					<e-input v-model="form.phone" inputAlign="right" type="number" :placeholder="$t('user.请输入银行预留手机号码')"
						border="none"></e-input>
				</e-form-item>
			</view>
		</e-form>
		<view class="e-p-t-60">
			<e-button size="large" type="primary" shape="circle" :text="$t('user.立即绑定')" @click="binding"></e-button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, computed } from 'vue'
	import { getBankList, postAddBindBank, type bankItem } from '@/common/request/api'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import type {
		FormInstance
	} from '@/uni_modules/endless-ui/typing'

	const ctx = useCurrentInstance()
	
	const formRef = ref<FormInstance>()

	const form = reactive<{
		realname : string
		bankcode : string
		phone : string
		idcard : string
		typeid : string
		bankaddr:string
		cardType:string
	}>({
		realname: '',
		bankcode: '',
		phone: '',
		idcard: '',
		typeid: '',
		bankaddr:'',
		cardType:''
	})
	const rules = computed(() => {
		return {
			realname: {
				type: 'string',
				required: true,
				message: ctx.$t('user.请输入持卡人姓名'),
				trigger: ['blur']
			},
			bankcode: {
				type: 'string',
				required: true,
				message: ctx.$t('user.请输入银行卡卡号'),
				trigger: ['blur']
			},
			phone: {
				type: 'string',
				required: true,
				message: ctx.$t('user.请输入银行预留手机号码'),
				trigger: ['blur']
			},
			idcard: {
				type: 'string',
				required: true,
				message: ctx.$t('user.请输入身份证号码'),
				trigger: ['blur']
			},
			typeid: {
				type: 'number',
				required: true,
				message: ctx.$t('user.请选择开户行'),
				trigger: ['blur']
			},
			bankaddr: {
				type: 'string',
				required: true,
				message: '请输入开户支行',
				trigger: ['blur']
			},
			cardType: {
				type: 'string',
				required: true,
				message: '请选择银行卡类型',
				trigger: ['blur']
			},
		}
	})
	
	const bankList = ref<[Array<bankItem>]>([[]])
	let isSelect = false



	const binding = () => {
		formRef.value?.validate().then((type) => {
			if (type) {
				let data = { ...form }
				postAddBindBank(data).then(res => {
					ctx.$toastApp(res.msg)
					if (isSelect) {
						// 通知其他页面绑定银行卡事件已完成
						uni.$emit('AddBindBankSuccess')
						ctx.$back()
					} else {
						setTimeout(() => {
							ctx.$back()
						}, 500)
					}


				})
			}
		})

	}


	onLoad((opt) => {
		if (opt?.type) {
			isSelect = true
		}
		getBankList().then(res => {
			bankList.value = [res.data]
		})
	})
</script>
<style>
	page {
		padding: 20rpx 30rpx;
	}
</style>
<style lang="scss" scoped>
	.form-box {
		padding: 0 30rpx 60rpx 30rpx;

		.form-item {
			padding: 20rpx 0;
			box-shadow: 0 -2rpx 0 0 #ededed;
		}
	}
</style>